var app=new Vue({
    el: '#app',
    data: {
        add: 'false',
        items: ['张华', '李四'],
        newItem: '',
    },
    methods: {
        addnew: function(){
            this.add='true';
        },
        // 确认添加新人员
        submit: function(){
            if(this.newItem !== ''){
                this.items.push(this.newItem);
            }
            this.newItem='';
            this.add='false';
        },
        edit: function(e){
            console.log(123);
            // 取消双击选定文字操作
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            // 获取需要修改姓名的td节点
            let personItem=e.target.parentNode.parentNode.childNodes[0];
            let name=personItem.innerHTML;
            personItem.innerHTML='<input type="text" class="name-form"/>';
            let input=personItem.childNodes[0];
            input.value=name;
            input.select();
            // 失去焦点后，输入框值给td显示
            input.onblur=function(){
                this.parentNode.innerHTML=this.value;
            }
            // 按下回车也可将框中的值传出
            input.onkeyup=function(e){
                if(e.keyCode===13){
                    // 调用失去焦点事件
                    this.blur();
                }
            }
        },
        del: function(e){
            // 取消双击选定文字操作
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            // 获取需要删除的tr节点
            let personTrItem=e.target.parentNode.parentNode;
            // 获取tr的父节点
            let tbody=e.target.parentNode.parentNode.parentNode;
            tbody.removeChild(personTrItem);
        },
    }
})